<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
const isHidden = ref(false)
const router = useRouter()
const handleHidden = () => {
  isHidden.value = !isHidden.value
}
const handleRecord = () => {
  router.push({ path: '/assetsRecord' })
}
</script>
<template>
  <div class="container">
    <div class="relative">
      <div class="flex items-center">
        <div class="text-[26px] font-400 text-[#AEB8B7] font-roboto mr-10px">预估总资产</div>
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 28 28" fill="none"
          @click="handleHidden">
          <path
            d="M25.3197 11.3523C22.5626 7.616 18.5157 5.25 13.9964 5.25C9.4761 5.25 5.44673 7.616 2.67298 11.3523C1.44885 12.9999 1.44885 15.4473 2.67298 17.0958C5.44673 20.832 9.49273 23.198 13.9955 23.198C18.5157 23.198 22.546 20.832 25.3197 17.0958C26.5439 15.4481 26.5439 13.0008 25.3197 11.3523ZM13.9999 20.076C12.4919 20.0744 11.0462 19.4746 9.97997 18.4084C8.91371 17.3421 8.31397 15.8964 8.31235 14.3885C8.31235 11.2525 10.8639 8.701 13.9999 8.701C17.1359 8.701 19.6874 11.2525 19.6874 14.3885C19.6874 17.5254 17.1359 20.076 13.9999 20.076ZM13.9999 10.451C12.9557 10.4515 11.9545 10.8665 11.2161 11.6048C10.4778 12.3431 10.0628 13.3444 10.0624 14.3885C10.0624 16.5629 11.8264 18.326 13.9999 18.326C16.1734 18.326 17.9374 16.5629 17.9374 14.3885C17.9374 12.2159 16.1734 10.451 13.9999 10.451Z"
            fill="#AEB8B7" />
        </svg>
      </div>
      <div class="text-[54px] font-800 text-[#FFFFFF] font-roboto mt-20px">
        {{ isHidden ? '*********' : '$480,393.84' }}
      </div>
      <div class="absolute top-20px right-[-30px] py-10 px-26 record text-[20px] font-400 text-[#FFFFFF] font-pingfang" @click="handleRecord">
        资产记录>
      </div>
    </div>
    <div class="rounded-24px px-30 py-34 bg-[#fff]/10 flex items-center justify-between mt-38px">
      <div>
        <div class="text-[24px] font-400 text-[#FFF]/50 font-roboto mb-14">今日盈亏</div>
        <div class="flex items-center mt-14px">
          <div class="text-[36px] font-800 text-[#FFFFFF] font-roboto">$27.59</div>
          <div class="flex items-center ml-14px">
            <div class="flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 13 11" fill="none">
                <path d="M6.06226 0L12.1244 10.5H7.82013e-05L6.06226 0Z" fill="#27C840" />
              </svg>
            </div>
            <!-- :class="indexInfo.change_rate > 0 ? 'text-[#19A55F]' : 'text-[#FF0000]'" -->
            <div class="text-[24px] text-[#27C840] font-pingfang ml-4">0.70%</div>
          </div>
        </div>
      </div>
      <div class="mr-68px">
        <div class="text-[24px] font-400 text-[#AEB8B7] font-roboto mb-14">我的算力</div>
        <div class="flex items-center mt-14px">
          <div class="text-[36px] font-800 text-[#FFFFFF] font-roboto">27.59M</div>
        </div>
      </div>
    </div>
    <div class="mt-45px flex items-center">
      <div class="w-10px h-32px bg-[#F76938] rounded-[154px]"></div>
      <div class="text-32px text-[#FFFFFF] font-700 font-roboto line-height-32px ml-12px">
        我的钱包
      </div>
    </div>
    <div class="flex flex-col gap-20 mt-34px">
      <div class="flex items-center justify-between bg-[#fff]/10 rounded-32px p-30" v-for="value in 10">
        <div class="flex items-center">
          <img src="/src/assets/icon/public/logo_full.png" class="w-60 h-60 rounded-full" alt="" />
          <div class="ml-14">
            <div class="text-[32px] font-600 text-[#FFFFFF] font-roboto uppercase mb-8">usdt</div>
            <div class="text-[24px] font-400 text-[#FFFFFF]/50 font-roboto">TetherUS</div>
          </div>
        </div>
        <div>
          <div class="text-[32px] font-600 text-[#FFFFFF] font-roboto uppercase mb-8 uppercase">3666.9955</div>
          <div class="text-[24px] font-400 text-[#FFFFFF]/50 font-roboto text-right uppercase">3666.99$</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
}

.record {
  user-select: none;
  border-radius: 55px 0 0 55px;
  background: #F76938;
}
</style>
